<template>
  <div class="page-container">
    <div v-if="showBreadcrumb" class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          v-for="item in breadcrumbItems" 
          :key="item.path"
          :to="item.path !== currentPath ? item.path : undefined"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="page-content">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/store/modules/auth'
import { generateBreadcrumb } from '@/utils/routeUtils'

defineProps({
  showBreadcrumb: {
    type: Boolean,
    default: true
  }
})

const route = useRoute()
const authStore = useAuthStore()

const currentPath = computed(() => route.path)

const breadcrumbItems = computed(() => {
  if (!authStore.menus.length) return []
  
  const breadcrumb = generateBreadcrumb(route, authStore.menus)
  
  // 添加首页链接
  if (breadcrumb.length > 0 && breadcrumb[0].path !== '/dashboard') {
    breadcrumb.unshift({
      title: '首页',
      path: '/dashboard'
    })
  }
  
  return breadcrumb
})
</script>

<style scoped lang="scss">
.page-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: calc(100vh - 108px);
  overflow: hidden;
}

.page-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  
  .el-breadcrumb {
    font-size: 14px;
    
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #666;
        font-weight: 400;
        
        &:hover {
          color: #1890ff;
        }
      }
      
      &:last-child .el-breadcrumb__inner {
        color: #333;
        font-weight: 500;
      }
    }
  }
}

.page-content {
  padding: 24px;
}

// 响应式设计
@media (max-width: 768px) {
  .page-container {
    min-height: calc(100vh - 76px);
  }
  
  .page-header {
    padding: 12px 16px;
  }
  
  .page-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 8px 12px;
  }
  
  .page-content {
    padding: 12px;
  }
}
</style>